<template>
    <div>
        <el-table
        stripe
        :data="list"
        style="width: 100%">
            <el-table-column
                label="ID">
                <template slot-scope="scope">
                    <div v-if="checkbox">{{ scope.row.id }}</div>
                    <el-checkbox v-else :label="scope.row.id"></el-checkbox>
                </template>
            </el-table-column>
            <el-table-column
                prop="title"
                label="标题">
            </el-table-column>
            <el-table-column
                v-if="isEdit"
                label="是否启用">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" @change="$emit('changeStatus', scope.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column
                label="难度">
                <template slot-scope="scope">
                    <el-rate
                        v-if="$ispc"
                        v-model="scope.row.level"
                        disabled
                        >
                    </el-rate>
                    <span v-else>{{ scope.row.level }}</span>
                </template>
            </el-table-column>
            <el-table-column
                v-if="!delEdit"
                :width="$ispc ? '300px' : ''"
                label="操作">
                <template slot-scope="scope">
                    <div>
                        <div class="hidden-md-and-down">
                            <el-button
                            @click="show(scope.row)">预览</el-button>

                            <el-button
                            v-if="isEdit"
                            type="primary"
                            @click="edit(scope.row)" icon="el-icon-edit">编辑</el-button>

                            <el-popconfirm
                            style="margin-left: 10px;"
                            v-if="handleDetele"
                            icon="el-icon-info"
                            icon-color="red"
                            @confirm="handleDetele(scope.$index, scope.row)"
                            title="确定删除吗？"
                            >
                                <el-button slot="reference" type="danger">删除</el-button>
                            </el-popconfirm>
                        </div>
                        <div class="hidden-lg-and-up">
                            <el-dropdown @command="command" trigger="click">
                                <el-button type="primary" plain>
                                    更多
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item v-for="(item, index) in btns"
                                    :command="{item,data : scope.row, index : scope.$index}"
                                    :key="index" v-show="isBtn(index)">{{ item }}</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                </template>
            </el-table-column>
            
        </el-table>
		<topicPreview :topic="topic" :drawer="drawer" @handleClose="drawer = false" />
    </div>
</template>

<script>
    import topicPreview from "@/components/topic/topicPreview.vue"
    export default {
        props : ['list' , 'handleDetele', 'isEdit', 'checkbox', 'delEdit'],
        components : {
            topicPreview
        },
        data(){
            return {
                drawer : false,
                topic : {},
                btns : ['预览', '编辑', '删除']
            }
        },
        methods : {
            command(data){
                [this.show, this.edit, this.del][this.btns.indexOf(data.item)](data.data, data.index)
            },
            show(item){
                this.topic = item;
                this.drawer = true
            },
            edit(item){
                this.$router.push('/admin/topicEdit?id=' + item.id)
            },
            del(data, index){
                this.$confirm('删除后将不可恢复！', '确定删除吗？')
				.then(() => {
                    this.handleDetele(index, data)
				})
				.catch(() => {});
            },
            isBtn(index){
                switch(index){
                    case 0:
                        return true
                    case 1:
                        return this.isEdit
                    case 2:
                        return this.handleDetele
                }
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>